<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.0/swiper-bundle.css">
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
<link rel="stylesheet" href="../css/swiper.css">

<head>
    <link rel="stylesheet" href="../css/base.css/base.css">
    <script src="../js/rem.js"></script>
    <link rel="stylesheet" href="../css/style.css/style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no" />
    <title>Document</title>
    <style>
        <style>html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height: 30%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        img {
            width: 100%;
            height: 100%;
        }

        footer {
            display: flex;
            justify-content: space-around;
        }

        li {
            font-size: 17px;
            color: #Fff;
            display: flex;
            justify-content: space-around;
        }

        span {
            display: flex;
            justify-content: space-around;

        }

        .box img {
            width: 2rem;
            height: rem;
        }

        .box {
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div class="aa">
        <header>
            <h4 style="text-align: center;color: #fff;line-height: 1rem;">最新信息
            </h4>

        </header>
        <nav>

            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="https://photo.16pic.com/00/64/83/16pic_6483474_b.jpg" alt="">
                    </div>
                    <div class="swiper-slide"><img src="https://photo.16pic.com/00/67/05/16pic_6705092_b.jpg" alt="">
                    </div>
                    <div class="swiper-slide"><img src="https://photo.16pic.com/00/74/95/16pic_7495885_b.jpg" alt="">
                    </div>
                    <div class="swiper-slide"><img src="https://photo.16pic.com/00/68/44/16pic_6844661_b.jpg" alt="">
                    </div>
                    <div class="swiper-slide"><img src="https://photo.16pic.com/00/63/07/16pic_6307732_b.jpg" alt="">
                    </div>
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
            <div class="box"> <span><img src="https://photo.16pic.com/00/68/44/16pic_6844724_b.jpg"
                        alt=""></span>科技是交通强国建设的第一动力。到2035年我国交通运输关键核心技术将实现自主可控。
            </div>

            <div class="box"> <span><img src="https://photo.16pic.com/00/67/16/16pic_6716270_b.jpg"
                        alt=""></span>科技是交通强国建设的第一动力。到2035年我国交通运输关键核心技术将实现自主可控。
            </div>

            <div class="box"> <span><img src="https://photo.16pic.com/00/55/85/16pic_5585704_b.jpg"
                        alt=""></span>科技是交通强国建设的第一动力。到2035年我国交通运输关键核心技术将实现自主可控。
            </div>
    </div>

    </nav>
    <footer>
        <span class="glyphicon glyphicon-envelope" aria-hidden="true">
            <li>主页</li>
        </span>
        <span class="glyphicon glyphicon-list-alt" aria-hidden="true">
            <li>圈子</li>
        </span>
        <span class="glyphicon glyphicon-heart-empty" aria-hidden="true">
            <li>收藏</li>
        </span>
        <span class="glyphicon glyphicon-user" aria-hidden="true">
            <li>我的</li>
        </span>


    </footer>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.0/swiper-bundle.esm.browser.js"></script>
    <script src="../js/swiper.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            cssMode: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination'
            },
            mousewheel: true,
            keyboard: true,
        });
    </script>
    </div>
</body>

</html>